<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            placeholder="请输入昵称/微信号搜索"
            v-model="alone.searchForm.data.searchStr"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.signWish"
            placeholder="请选择签约意愿搜索"
          >
            <el-option
              v-for="item in $store.state.SIGN.WISH.list"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="alone.searchForm.data.platform"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
            placeholder="请选择意向平台搜索"
          >
          </el-cascader>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model="alone.searchForm.data.platform"
            placeholder="请选择意向平台搜索"
          >
            <el-option
              v-for="item in $store.state.platformList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="c-main p20">
      <div class="clearfix">
        <div class="fl">总共：{{ pageAjax.paging.total }} 条.</div>
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table :data="pageAjax.data" stripe style="width: 100%">
            <el-table-column label="头像" width="130">
              <template slot-scope="scope">
                <!-- <img class="c-avatar" :src="scope.row.avatarUrl" alt="" /> -->
                <el-image
                  class="c-avatar"
                  :src="scope.row.avatarUrl"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="nickName" label="昵称">
              <template slot-scope="scope">
                <div class="">
                  {{
                    scope.row.nickName +
                      (!scope.row.hasLiveExperience ? "(素人)" : "") || "无"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="期望待遇">
              <template slot-scope="scope">
                <div class="">
                  {{
                    getSalaryStr(
                      scope.row.expectedBaseSalary,
                      scope.row.expectedBottomGuard,
                      scope.row.expectedSigningBonus,
                      scope.row.expectedOther
                    ) || "无"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="是否携带设备">
              <template slot-scope="scope">
                <div class="">
                  {{ (scope.row.deviceOwn ? "是" : "否") || "无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="意向平台">
              <template slot-scope="scope">
                <div class="text-abbreviate">
                  {{ scope.row.intentionPlatform || "无" }}
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column label="签约状态">
              <template slot-scope="scope">
                <div class="">
                  {{
                    $store.state.SIGN.STATUS.translate[scope.row.signStatus] ||
                      "无"
                  }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="绑定运营">
              <template slot-scope="scope">
                <div class="">
                  {{
                    scope.row.operator && scope.row.operator.nickName
                      ? scope.row.operator.departmentName +
                        "-" +
                        scope.row.operator.nickName
                      : "无"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="剩余绑定时间">
              <template slot-scope="scope">
                <div>
                  {{ getCountdown(scope.row.countdown * 1000) || "无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:agent_detail
                  @click="navToDetail(scope.row.anchorId)"
                  >详情</el-button
                >
                <span v-hasAuth:seestar_detail.invert>—</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getActorList } from "@/api/actor.js";
// import pageViewMixin from "./mixin";
import { mixin } from "@/components/mixin/getSalaryStr.js";
import { getCountdown } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "seestar_bindedList",
  mixins: [mixin],
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    agentWishAjax: {
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    agentSearchAjax: {
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    orgSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },
    alone: {
      signStatus: "BINDED",
      searchForm: {
        loading: false,
        data: {
          searchStr: "",
          signWish: "",
          platform: "",
          relType: 2
        }
      },
      countdownTimer: null
    },
    translate: {
      STATUS: {
        list: [
          {
            name: "试播",
            value: "SIGNING"
          },
          {
            name: "已开播",
            value: "SIGNED"
          }
        ]
      }
    },

    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    }
  }),
  created() {
    let _that = this;
    _that.getPageData();
    _that.getOrgData();
    // let oStatus = _.cloneDeep(_that.$store.state.SIGN.STATUS.list);
    // oStatus.push()
    // _that.translate.STATUS.list = _.cloneDeep(_that.$store.state.SIGN.STATUS.list);
  },
  destroyed() {
    let _that = this;
    clearInterval(_that.alone.countdownTimer);
  },
  methods: {
    rSubmitSearchForm() {
      let _that = this;
      let searchForm = _that.alone.searchForm;
      if (searchForm.loading) {
        return;
      }
      _that.alone.searchForm.loading = true;
      // if (!searchForm.data.searchStr && !searchForm.data.signWish && !searchForm.data.platform) {
      //   _that.$message.error({message: "搜索条件不能都为空", onClose: () => {
      //     _that.alone.searchForm.loading = false;
      //   }});
      //   return;
      // }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },

    getCountdown(time) {
      return getCountdown(time);
    },
    // 开始倒计时
    startCountDown() {
      let _that = this;
      let pageAjaxData = _.cloneDeep(_that.pageAjax.data);
      if (_that.alone.countdownTimer) {
        clearInterval(_that.alone.countdownTimer);
      }
      if (!pageAjaxData.length) {
        clearInterval(_that.alone.countdownTimer);
        return;
      }

      _that.alone.countdownTimer = setInterval(() => {
        pageAjaxData = pageAjaxData.filter(item => {
          if (item.countdown > 0) {
            item.countdown -= 1;
            return item;
          }
          return;
        });
        _that.pageAjax.data = pageAjaxData;
        if (!pageAjaxData.length) {
          clearInterval(_that.alone.countdownTimer);
          return;
        }
      }, 1000);
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      data.signStatus = _that.alone.signStatus;
      _that.pageAjax.loading = true;
      getActorList({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data.list;
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
            _that.startCountDown();
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
          _that.alone.searchForm.loading = false;
        });
    },
    getOrgData() {
      let _that = this;
      return _that.$store.dispatch("getPlatformList").then(() => {
        let arr =
          _.cloneDeep(
            _that.$store.getters.wantPlatformListOffspringnTreeData(2)
          ) || [];

        _that.orgSupAjax.data = arr;
      });
    },

    navToDetail(id) {
      this.$router.push({
        name: "seestar_detail",
        query: {
          anchorId: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
    .c-avatar {
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .f-agentWish {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;
    }
    .c-card {
      .c-item {
        padding-bottom: 20px;
        border-top: 1px solid #f5f7fa;
      }
      .c-UserInfo {
        position: relative;
        overflow: hidden;
        line-height: 25px;
      }
      .c-avatar {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .c-nameInfo {
        float: left;
        margin-left: 20px;
      }
      .c-copyBtn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #eee;
        padding: 10px 20px;
        border-radius: 20px;
      }
      .c-bid {
        overflow: hidden;
        line-height: 30px;
        img {
          float: left;
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
  .f-agent {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      padding-top: 60px;
      overflow: auto;
    }
    .c-avatar {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
}
</style>
